require("../../assets/css/index.less")
require("./run_data.less");
require("../../assets/iconfont/iconfont.css")

const echarts = require("echarts");
const request = require("../../lib/requst")

function $(select){
   return document.querySelector(select)
}
// 柱状图
function renderBar(series,Xdate){
  const myChart = echarts.init(document.querySelector("#bar"));
  myChart.setOption({
    title: {
        text: '近7天运动数据'
      },
      tooltip: {},
      xAxis: {
        data: Xdate
      },
      yAxis: {},
      series:series
  })
  window.onresize = function() {
    myChart.resize();
   };
}

//饼状图
function renderPie(){
  const myChart = echarts.init(document.querySelector("#pie"));
  myChart.setOption({
    title: {
      text: '运动类型',
      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'middle'
    },
    series: [
      {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
              {
                  value: 40,
                  name: '训练',
                  label: {
                      // show: false,
                      position: 'inside',
                      color: '#fff',
                      formatter: '{c}%',
                  },
                  itemStyle: {
                      color: '#58bb92',
                  },
              },
              {
                  value: 25,
                  name: '跑步',
                  label: {
                      position: 'inside',
                      color: '#fff',
                      formatter: '{c}%',
                  },
                  itemStyle: {
                      color: '#736171',
                  },
              },
              {
                  value: 35,
                  name: '骑行',
                  label: {
                      position: 'inside',
                      color: '#fff',
                      formatter: '{c}%',
                  },
                  itemStyle: {
                      color: '#ee5c43',
                  },
              },
          ],
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
      }
  ]
  })
}
renderPie();

// 渲染本页面的所有数据
request.get("/api/exercise").then(res=>{
   let {errno,data} = res.data
   console.log(data)
   $(".times").textContent = data.sum7Duration;
   $(".cas").textContent = data.sum7Calorie;
   $(".cas2").textContent = data.sum7Calorie;
   let Xdate = data.days.map(v=>v.date.slice(5));
   console.log(Xdate)
   let arr = ["count",'sumDuration','sumMeter','sumCalorie'];
   let series = arr.map((name)=>{
     return {
       name : name,
       type: "bar",
       data: data.days.map(v=>v[name])
     }
   })
   renderBar(series,Xdate);
  //  console.log(series);
})

// 渲染头像
let API="http://fitness.h5.itsource.cn:3701";
request.get("/api/user/info").then(res=>{
  let {errno,data} = res.data
  console.log(data)
  $(".img").src = API + data.imgUrl
})

// 返回按钮
$(".fanhui").addEventListener("click",function(){
  history.go(-1);
})

